<template>
  <view id="login">
    <view class="logintop">
      <image src="/static/login/bgimg.png" mode="widthFix" />
    </view>

    <view class="loginbot">
      <view class="form">
        <u--form :model="form" ref="formRef" :rules="rules">
          <u-form-item>
            <u--input border="bottom" placeholder="姓名" v-model="form.name" />
          </u-form-item>
          <u-form-item>
            <u--input border="bottom" placeholder="身份证" v-model="form.card" />
          </u-form-item>
          <u-button @click="submit" class="formbut">登录</u-button>
        </u--form>
      </view>
    </view>
  </view>
</template>

<script setup>
  import {
    ref,
    reactive
  } from "vue";

  const form = reactive({
    name: "",
    card: "",
  });

  const rules = {
    name: [{
      required: true,
      message: "请输入姓名",
      trigger: ["blur", "change"],
    }, ],
    card: [{
      required: true,
      message: "请输入身份证号",
      trigger: ["blur", "change"],
    }, ],
  };

  const formRef = ref(null);

  const submit = () => {
    console.log(formRef.value.validate);
    uni.switchTab({
      url: '/pages/index/index'
    });
    formRef.value.validate((valid) => {
      if (valid) {
        // 表单验证通过，提交表单
        console.log(111);
      } else {
        // 表单验证失败
        console.log(222);
      }
    });
  };
</script>

<style lang="scss" scoped>
  #login {
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;

    .logintop {
      width: 100%;
      height: 50vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .loginbot {
      width: 100vw;
      height: 44vh;
      position: fixed;
      bottom: 0;
      background-image: url("/static/login/bgbot.png");
      background-size: 100% 100%;

      .form {
        width: 80vw;
        height: 30vh;
        margin: 0 auto;
        margin-top: 100rpx;

        .formbut {
          width: 70%;
          margin: 0 auto;
          margin-top: 80rpx;
          border-radius: 16rpx;
          background-color: white;
          color: #8f5be4;
          font-weight: bold;
        }
      }
    }
  }
</style>